<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Iframe Title</title>
<meta charset=utf-8 />
<style type="text/css">
<!--
body {
-moz-box-shadow: 4px 4px 5px #888;
-webkit-box-shadow: 4px 4px 5px #888;
box-shadow: 4px 4px 5px #888;
}
-->
</style>
</head>
<body onload=sendSize() style='padding:5px;border-radius:10px;border:2px solid lightblue;background-color:transparent;margin:0;font-family:arial'>
<div id=containerDiv style=background-color:#ABCDEF>

<table style='width:300px;'>
<tr>
<td>
<table style='width:100%;'>
<tr ><td id=drawStatusStickTopTable style='width:90%;' align=center><span id=drawStatusStickEditSpan>Draw Status Sticks</span></td><td align=right> <button onClick=parent.closeDrawStatusStick()  >X</button></td></tr>
<tr><td  align=center colspan=2>

HMI Symbol SVG Source:<input type=checkbox  title="Show SVG source for this element"  id=sourceHMICheck  />


</td></tr>
</table>
</td>

</tr>

<tr>
<td align=center>

  Status: <select onChange=parent.drawStatusStickStatusSelected() id=drawStatusStickStatusSelect>
		<option value="on" >ON</option>
		<option value="alarm"  >ALARM</option>
		<option value="intermittent"  >INTERMITTENT</option>
		<option value="defective"  >DEFECTIVE</option>
		<option value="normalOff"  >NORMAL OFF</option>



		</select>



  Scale: <select onChange=parent.drawStatusStickScaleSelected() id=drawStatusStickScaleSelect>
		<option value=".1">10%</option>
		<option value=".2" >20%</option>
		<option value=".3" selected  >30%</option>
		<option value=".4" >40%</option>
		<option value=".5" >50%</option>
		<option value=".6" >60%</option>
		<option value=".7">70%</option>
		<option value=".8" >80%</option>
		<option value=".9" >90%</option>
		<option value="1.0" >100%</option>



		</select>

</td>
</tr>

<tr  align=center>
	<td valign=bottom align=center>Rotate
		&nbsp;&nbsp;<button  onClick=parent.rotateStatusStickAdjust(-1) style='height:25px;width:25px;padding:0px'><img width=20 height=20 src="../Images/minusRound.png" /></button>
		<select title="rotate toggle value" id=rotateDrawStatusStickAdjustSelect >
		<option>.5</option>
		<option>1</option>
		<option>2</option>
		<option selected>5</option>
		<option>10</option>
		</select>
		<button onClick=parent.rotateStatusStickAdjust(1)   style='height:25px;width:25px;padding:0px'><img width=20 height=20 src="../Images/plusRound.png" /></button>
		&nbsp;<input id=adjustedRotateStatusStickValue disabled type=text style='width:40px;' value=0 />&deg;
	</td>
</tr>

<tr  align=center>
<td>
	<button id=drawStatusStickCancelButton disabled title='cancel/remove this circle' onClick=parent.cancelDrawStatusStick()>cancel</button>
    <button style='background-color:red;visibility:hidden' id=drawStatusStickDeleteButton  onClick=parent.removeCurrentDrawStatusStick()>delete</button>
	<button id=drawStatusStickTopButton style=background:white;font-size:120%;font-weight:bold;color:maroon;visibility:hidden  title='Move to top' onClick=parent.topDrawStatusStick()>&#x21E7;</button>
	<button id=drawStatusStickBotButton style=background:white;font-size:120%;font-weight:bold;color:maroon;   title='Move to bottom' onClick=parent.botDrawStatusStick()>&#x21E9;</button>

    <button id=drawStatusStickFinishButton disabled onClick=parent.finishDrawStatusStick()>finish</button>
</td>
</tr>

</table>
</div>


</body>
<script>



function sendSize()
{


   var width=containerDiv.scrollWidth+15
   var height=containerDiv.scrollHeight+30

   parent.sizeFrame('addElemStatusStick',width,height)


     if(parent.EditStatusStick==true)
        parent.setEditStatusStick()
        else
       parent.startStatusStickDraw()

}


</script>
</html>